<template>
    <div class="mygz">
           <div class="back" @click="back"><img src="../assets/img/back.png" alt=""></div>
           <h1>我的关注</h1>
            <div class="gz" v-for="item in gzlist" :key="item.children[0].model.resource.user_id">
                   <div class="item">
                        <div class="img">
                            <img :src="item.children[0].model.resource.author.userinfo.avatar" alt="">
                        </div>
                        <div class="title">
                             <h2>{{item.children[0].model.resource.author.userinfo.username}}</h2>
                           <p> <span>{{item.children[0].model.resource.author.userinfo.occupation}}</span>
                               <span>粉丝{{item.children[0].model.resource.author.userinfo.count.count_follower}}</span></p>
                        </div>
                        <div class="bts" @click="quit(item.children[0].model.resource.user_id)">
                             <p>取消关注</p>
                        </div>
                   </div>
           </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                gzlist: null,
            };
        },
        methods: {
            back(){
                this.$router.push('/user')
            },
            quit(id){
            
                 let temp=JSON.parse(window.localStorage.getItem('isgz'))
                 let index=temp.findIndex(item=>item.children[0].model.resource.user_id==id)
                 console.log(id);
                 temp.splice(index,1)
                 window.localStorage.setItem('isgz',JSON.stringify(temp))
                 this.getGzlist()
            },
            getGzlist(){
            let temp=JSON.parse(window.localStorage.getItem('isgz'))
            this.gzlist=temp
            }
        },
        created() {
           this.getGzlist()
        },
    }
</script>

<style lang="less" scoped>
       .mygz{
        min-height: 675px;
        background-color: #fff;
          .back{
            position: absolute;
            z-index: 10;
            left: 20px;
            top: 10px;
            img{
                width: 30px;
            }
          }
          h1{
            text-align: center;
            padding: 10px 0px;
            font-size: 22px;
             border-bottom: 1px solid #f2f2f2;
             background-color: #fff;
          }
          .gz{
            padding: 10px 0px;
            width: 100%;
            background-color: #fff;
           border-bottom: 1px solid #f2f2f2;
              
                .item{
                  width: 90%;
                margin: 0 auto;
                display: flex;
                align-items: center;
               
                .img{
                    width: 18%;
                    img{
                        width: 50px;
                        border-radius: 50%;
                        height: 50px;
                    }
                }
                .title{
                    flex: 1;
                    h2{
                        font-size: 14px;
                        font-weight: 600;
                    }
                    p{
                        span{
                            font-size: 12px;
                            color: gray;
                            display: inline-block;
                            margin-right: 10px;
                        }
                    }
                }
                .bts{
                    p{
                        padding: 5px 10px;
                        background-color: #d6d2d2;
                        border-radius: 15px;
                        font-size: 14px;
                        color: gray;
                    }
                }
                }
        

          }
       }
</style>